<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2017/12/27 0027
  Time: 16:55
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="/commons/global.jsp" %>
<html>
<head>
    <%@ include file="/commons/basejs.jsp" %>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>产品单项管理</title>
    <script type="text/javascript">
        function formatterImg(value) {
            if (value != null) {
                return '<img height="40px"  src="' + value + '" alt="" />';
            } else {
                return '';
            }
        }
        //扩展的Date的format方法(上述插件实现) 日期转换格式
        Date.prototype.format = function (format) {
            var o = {
                "M+": this.getMonth() + 1, // month
                "d+": this.getDate(), // day
                "h+": this.getHours(), // hour
                "m+": this.getMinutes(), // minute
                "s+": this.getSeconds(), // second
                "q+": Math.floor((this.getMonth() + 3) / 3), // quarter
                "S": this.getMilliseconds()
                // millisecond
            }
            if (/(y+)/.test(format))
                format = format.replace(RegExp.$1, (this.getFullYear() + "")
                    .substr(4 - RegExp.$1.length));
            for (var k in o)
                if (new RegExp("(" + k + ")").test(format))
                    format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
            return format;
        }
        //调用日期转化格式方法
        function formatDatebox(value) {

            if (value == null || value == '') {
                return '';
            }
            var dt;
            if (value instanceof Date) {
                dt = value;
            } else {
                dt = new Date(value);
            }

            return dt.format("yyyy-MM-dd hh:mm:ss");
        }

    </script>
</head>
<body>
<div style="color: red" class="easyui-layout" fit="true">
    <div data-options="region:'west',split:true,border:false" title="产品列表" style="width:30%;">
        <table id="product_datagrid" class="easyui-datagrid"
               data-options="
		   		url:'${path}/productSingleProject/productList.do',
		   		fit:true,
		   		rownumbers:true,
		   		fitColumns: true,
		   		toolbar:'#product_tools',
		   		pagination:true,
		   		singleSelect:true,
		   		onClickRow:function(index, row){
		   			getProductSingleProjectCategory(row.id);
		   		}
		   		">
            <thead>
            <th data-options="field:'id'">ID</th>
            <th data-options="field:'productName',width:100">产品名称</th>
            <th data-options="field:'productImg',width:80,formatter:formatterImg">产品图片</th>
            <th data-options="field:'sellerName',width:100">商家名称</th>
            <th data-options="field:'type',width:50,formatter:function(value){
           if(value==0){
             return '体检套餐';
             }else if(value==1){
                return '线上体检卡';
                }else if(value==2){
                return '线下体检卡';
                }else if(value==3){
                return '邮寄产品';
                }
             }">产品类型
            </th>
            </thead>
        </table>
        <div id="product_tools">
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-reload'"
               onclick="$('#product_datagrid').datagrid('reload') ">刷新</a>
            <label>关键词:</label>
            <input class="easyui-searchbox" data-options="prompt:'请输入产品名称|商家名称',searcher:doProductSearch"
                   style="width:220px;"/>
        </div>
        <script>
            //联动处理productId处理规格列表
            function getProductSingleProjectCategory(productId) {
                $("#createSingleProject").attr("productId",productId);
              $("#singleProjectCategory_datagrid").datagrid('clearSelections');
                var queryParams = {};
                queryParams.productId = productId;
                var options = $("#singleProjectCategory_datagrid").datagrid('getPager').data("pagination").options;
                options.pageNumber = 1;
                //重新加载
                $("#singleProjectCategory_datagrid").datagrid('options').url = "${path}/productSingleProject/singleProjectCategoryList.do";
                $("#singleProjectCategory_datagrid").datagrid('options').queryParams = queryParams;
                $("#singleProjectCategory_datagrid").datagrid('reload');
            }
            //查询
            function doProductSearch(val) {
                var queryParams = {};
                queryParams.keyWord = val;
                var options = $("#product_datagrid").datagrid('getPager').data("pagination").options;
                options.pageNumber = 1;
                //重新加载
                $("#product_datagrid").datagrid('options').url = "${path}/productSpecification/productList.do";
                $("#product_datagrid").datagrid('options').queryParams = queryParams;
                $("#product_datagrid").datagrid('reload');
            }
        </script>
    </div>
<!------------------单项分类列表Start--------------------------->
    <div data-options="region:'center',split:true,border:false" title="单项分类列表" style="width:25%;">
        <table id="singleProjectCategory_datagrid" class="easyui-datagrid"
               data-options="
		   		fit:true,
		   		rownumbers:true,
		   		fitColumns: true,
		   		toolbar:'#singleProjectCategory_tools',
		   		pagination:true,
		   		singleSelect:true,
		   		onClickRow:function(index, row){
	                getProductSingleProject(row);
		   		}
		   		">
            <thead>
            <th data-options="field:'id'">ID</th>
            <th data-options="field:'name',width:100">名称</th>
            <th data-options="field:'ord',width:60">排序</th>

            <th data-options="field:'status',width:100,formatter:function(value){
             if(value==0){
             return '不启用';
             }else{
                return '启用';
                }
             }">是否启用</th>
             <th data-options="field:'type',width:60,formatter:function(value){
             if(value==0){
                  return '<span style=\'color:red\'>未配置</span>';
             }else{
                return '<span  style=\'color: green\'>配置</span>';
                }
                 } ">状态</th>
            <th data-options="field:'statusType',width:100,formatter:formatData">操作</th>
            </thead>
        </table>
        <div id="singleProjectCategory_tools">
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-reload'"  onclick="$('#singleProjectCategory_datagrid').datagrid('reload') ">刷新</a>
            <label>关键词:</label>
            <input class="easyui-searchbox" data-options="prompt:'请输入分类名称',searcher:dosingleProjectCategorySearch" style="width:120px;"/>
        </div>
        <script>
            function formatData(value,row,index) {
                if(value==0){
                    return "<a href='javascript:void(0)'  class='easyui-linkbutton'  data-options='iconCls:icon-edit' onclick='checkConfiguration("+index+")'>点击配置<a/>";
                }else{
                    return "<a href='javascript:void(0)'  class='easyui-linkbutton'  data-options='iconCls:icon-edit' onclick='deletecheckConfiguration("+index+")'>取消配置<a/>";
                }
            }
            //查询
            function dosingleProjectCategorySearch(val) {
                var queryParams = {};
                queryParams.keyWord = val;
                var options = $("#singleProjectCategory_datagrid").datagrid('getPager').data("pagination").options;
                options.pageNumber = 1;
                //重新加载
                $("#singleProjectCategory_datagrid").datagrid('options').url = "${path}/productSingleProject/singleProjectCategoryList.do";
                $("#singleProjectCategory_datagrid").datagrid('options').queryParams = queryParams;
                $("#singleProjectCategory_datagrid").datagrid('reload');
            }
            //点击配置(添加分类)
            function checkConfiguration(index){
                $("#singleProjectCategory_datagrid").datagrid('selectRow',index);  //选中
                var row =  $("#singleProjectCategory_datagrid").datagrid('getSelected');//获取选中行
                if(row.status==0){
                    $.messager.alert("系统提示", "请启用该分类","info");
                    return;
                }
                $.ajax({
                    url:"${path}/productSingleProject/checkConfiguration.do",
                    type:"post",
                    data:{productId : row.productId,
                        singleProjectCategoryId : row.id
                    },
                    dataType:"json",
                    success:function(data){
                        $.messager.progress("close");
                        if(data.success){
                            $.messager.show({
                                title:"系统提示",
                                msg:"配置成功!",
                                timeout:600,
                                style:"left:30%;top:10%",
                                showType:"fade"
                            });
                            reloadSingleProjectCategory(row.productId);
                        }else{
                            $.messager.alert("系统提示", data.msg,"error");
                        }
                    },
                    error:function(){
                        $.messager.progress("close");
                        $.messager.alert("系统提示", "服务器连接失败!","error");
                    }
                });
            }
            //取消配置(删除分类)
            function deletecheckConfiguration(index){
                $("#singleProjectCategory_datagrid").datagrid('selectRow',index);  //选中
                var row =  $("#singleProjectCategory_datagrid").datagrid('getSelected');//获取选中行
                $.ajax({
                    url:"${path}/productSingleProject/deletecheckConfiguration.do",
                    type:"post",
                    data:{productId : row.productId,
                        singleProjectCategoryId : row.id
                    },
                    dataType:"json",
                    success:function(data){
                        $.messager.progress("close");
                        if(data.success){
                            $.messager.show({
                                title:"系统提示",
                                msg:"取消成功!",
                                timeout:600,
                                style:"left:30%;top:10%",
                                showType:"fade"
                            });
                            reloadSingleProjectCategory(row.productId);
                        }else{
                            $.messager.alert("系统提示", data.msg,"error");
                        }
                    },
                    error:function(){
                        $.messager.progress("close");
                        $.messager.alert("系统提示", "服务器连接失败!","error");
                    }
                });
            }


           // 刷新
            function  reloadSingleProjectCategory(productId) {
                var queryParams = {};
                queryParams.productId = productId;
                var options = $("#singleProjectCategory_datagrid").datagrid('getPager').data("pagination").options;
                options.pageNumber = 1;
                //重新加载
                $("#singleProjectCategory_datagrid").datagrid('options').url = "${path}/productSingleProject/singleProjectCategoryList.do";
                $("#singleProjectCategory_datagrid").datagrid('options').queryParams = queryParams;
                $("#singleProjectCategory_datagrid").datagrid('reload');
            }
            //联动查询
            function getProductSingleProject(row) {
                $("#singleProject_datagrid").datagrid('clearSelections');
                var queryParams = {};
                queryParams.productId = row.productId;
                queryParams.categoryId=row.id;
                var options = $("#singleProject_datagrid").datagrid('getPager').data("pagination").options;
                options.pageNumber = 1;
                //重新加载
                $("#singleProject_datagrid").datagrid('options').url = "${path}/productSingleProject/productSingleProjectList.do";
                $("#singleProject_datagrid").datagrid('options').queryParams = queryParams;
                $("#singleProject_datagrid").datagrid('reload');
            }

        </script>
    </div>

    <!------------------单项列表Start--------------------------->
    <div styl  data-options="region:'east',split:true,border:false"  title="单项列表" style="width:45%;">
        <table id="singleProject_datagrid" class="easyui-datagrid"
               data-options="
		   		fit:true,
		   		rownumbers:true,
		   		fitColumns: true,
		   		toolbar:'#singleProject_tools',
		   		pagination:true,
		   		singleSelect:true,
		   		onClickRow:function(index, row){

		   		}
		   		">
            <thead>
            <th data-options="field:'id'">ID</th>
            <th data-options="field:'name',width:60">单项名称</th>
            <th data-options="field:'price',width:60">单项价格</th>
            <th data-options="field:'des',width:60">单项明细</th>
            <th data-options="field:'significance',width:60">单项意义</th>
            <th data-options="field:'ord',width:40">排序</th>
            <th data-options="field:'status',width:80,formatter:function(value){
             if(value==0){
             return '不启用';
             }else{
                return '启用';
                }
             }">是否启用</th>
            <th data-options="field:'type',width:60,formatter:function(value){
             if(value==0){
                  return '<span style=\'color:red\'>未配置</span>';
             }else{
                return '<span  style=\'color: green\'>配置</span>';
                }
                 } ">状态</th>
            <th data-options="field:'statusType',width:100,formatter:formatDataSingleProject">操作</th>
            </thead>
        </table>
        <div id="singleProject_tools">
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-reload'"  onclick="$('#singleProjectCategory_datagrid').datagrid('reload') ">刷新</a>
            <label>关键词:</label>
            <input class="easyui-searchbox" data-options="prompt:'请输入单项名称',searcher:dosingleProjectSearch" style="width:120px;"/>

            <a href="#" id="createSingleProject" productId="-1"   class="easyui-linkbutton" data-options="iconCls:'icon-tip'"  onclick="createSingleProject() " style="margin-left:450px;width: 100px ">生成</a>
        </div>
        <script>

            function formatDataSingleProject(value,row,index) {
                if(value==0){
                    return "<a  href='javascript:void(0)'  class='easyui-linkbutton'  data-options='iconCls:icon-edit' onclick='checkSingleProjectConfiguration("+index+")'>点击配置<a/>";
                }else{
                    return "<a href='javascript:void(0)'  class='easyui-linkbutton'  data-options='iconCls:icon-edit' onclick='deletecheckSingleProjectConfiguration("+index+")'>取消配置<a/>";
                }
            }

            //点击配置
             function checkSingleProjectConfiguration(index) {
                 $("#singleProject_datagrid").datagrid('selectRow',index);  //选中
                 var row =  $("#singleProject_datagrid").datagrid('getSelected');//获取选中行
                 if(row.status==0){
                     $.messager.alert("系统提示", "请在单项库中启用该单项!","info");
                  return;
                 }

                 $.ajax({
                     url:"${path}/productSingleProject/checkSingleProject.do",
                     type:"post",
                     data:{productId : row.productId,
                         singleProjectCategoryId : row.singleProjectCategoryId,
                         singleProjectId:row.id
                     },
                     dataType:"json",
                     success:function(data){
                         $.messager.progress("close");
                         if(data.success){
                             $.messager.show({
                                 title:"系统提示",
                                 msg:"配置成功!",
                                 timeout:600,
                                 style:"left:30%;top:10%",
                                 showType:"fade"
                             });
                             reloadSingleProject(row.productId,row.singleProjectCategoryId);
                         }else{
                             $.messager.alert("系统提示", data.msg,"error");
                         }
                     },
                     error:function(){
                         $.messager.progress("close");
                         $.messager.alert("系统提示", "服务器连接失败!","error");
                     }
                 });
             }
             //取消配置
            function deletecheckSingleProjectConfiguration(index) {
                $("#singleProject_datagrid").datagrid('selectRow',index);  //选中
                var row =  $("#singleProject_datagrid").datagrid('getSelected');//获取选中行
                if(row.status==0){
                    $.messager.alert("系统提示", "请在单项库中启用该单项!","info");
                    return;
                }
                $.ajax({
                    url:"${path}/productSingleProject/deleteCheckSingleProject.do",
                    type:"post",
                    data:{productId : row.productId,
                        singleProjectId : row.id
                    },
                    dataType:"json",
                    success:function(data){
                        $.messager.progress("close");
                        if(data.success){
                            $.messager.show({
                                title:"系统提示",
                                msg:"取消成功!",
                                timeout:600,
                                style:"left:30%;top:10%",
                                showType:"fade"
                            });
                            reloadSingleProject(row.productId,row.singleProjectCategoryId);
                        }else{
                            $.messager.alert("系统提示", data.msg,"error");
                        }
                    },
                    error:function(){
                        $.messager.progress("close");
                        $.messager.alert("系统提示", "服务器连接失败!","error");
                    }
                });
            }
            //查询
            function dosingleProjectSearch(val) {
                var queryParams = {};
                queryParams.keyWord = val;
                var options = $("#singleProject_datagrid").datagrid('getPager').data("pagination").options;
                options.pageNumber = 1;
                //重新加载
                $("#singleProject_datagrid").datagrid('options').url = "${path}/productSingleProject/productSingleProjectList.do";
                $("#singleProject_datagrid").datagrid('options').queryParams = queryParams;
                $("#singleProject_datagrid").datagrid('reload');
            }
            //刷新
            function  reloadSingleProject(productId,singleProjectCategoryId){
                var queryParams = {};
                queryParams.productId = productId;
                queryParams.categoryId=singleProjectCategoryId;
                var options = $("#singleProject_datagrid").datagrid('getPager').data("pagination").options;
                options.pageNumber = 1;
                //重新加载
                $("#singleProject_datagrid").datagrid('options').url = "${path}/productSingleProject/productSingleProjectList.do";
                $("#singleProject_datagrid").datagrid('options').queryParams = queryParams;
                $("#singleProject_datagrid").datagrid('reload');
            }
            //生成单项
            function createSingleProject(){
                var productId =$("#createSingleProject").attr("productId")
                if(productId==-1){
                    $.messager.alert("系统提示", "请选择一个产品","info");
                    return;
                }else{
                    $("#edit_SingleProject_dialog").dialog("open");

                    $.ajax({
                        url:"${path}/productSingleProject/createSingleProject.do",
                        type:"post",
                        data:{productId : productId},
                        dataType:"json",
                        success:function(data){
                            $.messager.progress("close");
                            if(data.success){
                                ue.setContent( data.msg);
                            }else{
                                $.messager.alert("系统提示", data.msg,"error");
                            }
                        },
                        error:function(){
                            $.messager.progress("close");
                            $.messager.alert("系统提示", "服务器连接失败!","error");
                        }
                    });
                }
            }

        </script>
    </div>
<!--*******************************弹框*****************************************-->
    <style>
        .td1{
            border: 1px solid #e0e0e0;
            background-color: #e0e0e0;
            text-align: center;
            height: 60px;
        }
    </style>
    <div class="easyui-dialog" id="edit_SingleProject_dialog" title="生成单项" data-options="closed:true,modal:true,width:1000,height:700">
        <form id="edit_SingleProject_form" method="post">
                <table>
                    <tr>
                        <td class="td1"><h1>预览:<span style="color: red">产品详情的产品单项组合</span></h1></td>
                    </tr>
                    <tr>
                        <td>
                            <div>
                                <textarea id="editor" style="height:440px;"  name="detail">${createSingleProject}</textarea>
                            </div>
                        </td>
                    </tr>
                </table>
        </form>
        <script>
            //实例化编辑器
            //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
            var ue = UE.getEditor('editor',{
                serverUrl:"${path}/file/upload.do"
            });
        </script>
        <div  data-options="region:'south',border:true" style="height: 24px; text-align: center" >
            <a  class="easyui-linkbutton" icon="icon-save" onclick="saveSettingsSingleProject()" >保存</a>
            <a  class="easyui-linkbutton" icon="icon-cancel" onclick="$('#edit_SingleProject_dialog').dialog('close')" >取消</a>
        </div>
    </div>
</div>
<script>
    function saveSettingsSingleProject() {
        var productId =$("#createSingleProject").attr("productId")
        var detail=ue.getContent();
        $.ajax({
            url:"${path}/productSingleProject/saveSettingsSingleProject.do",
            type:"post",
            data:{productId : productId,
                detail : detail
            },
            dataType:"json",
            success:function(data){
                $.messager.progress("close");
                $('#edit_SingleProject_dialog').dialog('close')
                if(data.success){
                    $.messager.show({
                        title:"系统提示",
                        msg:"保存成功!",
                        timeout:600,
                        style:"left:30%;top:10%",
                        showType:"fade"
                    });
                }else{
                    $.messager.alert("系统提示", data.msg,"error");
                }
            },
            error:function(){
                $.messager.progress("close");
                $.messager.alert("系统提示", "服务器连接失败!","error");
            }
        });

    }
    
</script>
</body>
</html>
